<template>
  <el-dialog
    v-model="visible"
    title="新建盘点"
    width="500"
    align-center
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clickClose"
  >
    <div class="create-inventory-count">
      <el-form :model="form" ref="formRef" label-width="auto" style="max-width: 600px">
        <el-form-item
          prop="receivingName"
          label="盘点标题"
          :rules="{ required: true, message: '请输入', trigger: ['blur', 'change'] }"
        >
          <el-input
            v-model="form.receivingName"
            placeholder="请输入"
            maxlength="10"
            oninput="value = value.replace(/[!|@|#|$|%|^|&|*|+|~|`|,|.|！|￥]/g, '')"
          />
        </el-form-item>
        <el-form-item
          prop="warehouseId"
          label="盘点仓库"
          :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }"
        >
          <el-select v-model="form.warehouseId" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in houseList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId" />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="checkType"
          label="盘点类型"
          :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }"
        >
          <el-select v-model="form.checkType" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in pdTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="pdDate" label="盘点日期" :rules="{ required: true, message: '请选择', trigger: ['blur', 'change'] }">
          <el-date-picker
            v-model="form.pdDate"
            type="date"
            placeholder="请选择"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item> -->
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button plain @click="clickClose">取消</el-button>
        <el-button type="primary" @click="submit">生成盘点明细</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { inboundOrderDetail, abnormalHandle } from "@/apis/procure/entry";
import useCodeArrStore from "@/store/modules/select";
import { ListPage } from "@/apis/procure/warehouse";
import { useRouter } from "vue-router";
const router = useRouter();

const visible = ref(false);
const form = ref({});
const formRef = ref();
const houseList = ref([{ label: "仓库1", value: 1 }]);
const pdTypeList = ref([
  { label: "整仓盘点", value: 1 },
  { label: "SKU盘点", value: 2 }
]);

const emit = defineEmits(["close", "submit"]);
const props = defineProps({
  optionInfo: {
    type: Object,
    default: () => {
      return {
        isShow: false
      };
    }
  }
});
watch(
  () => props.optionInfo.isShow,
  async val => {
    visible.value = val;
  },
  { deep: true }
);
onMounted(async () => {
  const res = await ListPage({ page: 1, size: 9999 }); //仓库list
  houseList.value = res.data.records || [];
});

const submit = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      router.push({
        path: form.value.checkType === 1 ? "/procure/inventory-count/add-all" : "/procure/inventory-count/add-sku",
        query: { ...form.value }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const clickClose = () => {
  formRef.value.resetFields();
  emit("close");
};
</script>

<style lang="scss" scoped></style>
